<template>
  <div style="width: 600px; margin: 0 auto; padding-top: 50px;">
    <el-form ref="formRef" :rules="clientRules" :model="client" label-width="100px">
      <el-form-item label="主机编号" prop="clientId">
        <el-input v-model="client.clientId" />
      </el-form-item>
      <el-form-item label="主机名称" prop="clientName">
        <el-input v-model="client.clientName" />
      </el-form-item>
      <el-form-item label="主机类型" prop="clientRole">
        <el-input v-model="client.clientRole" />
      </el-form-item>
      <el-form-item label="主机位置" prop="clientLocation">
        <el-input v-model="client.clientLocation" />
      </el-form-item>
      <el-form-item label="IP地址" prop="clientIP">
        <el-input v-model="client.clientIP" />
      </el-form-item>
      <el-form-item label="MAC地址" prop="clientMAC">
        <el-input v-model="client.clientMAC" />
      </el-form-item>
      <el-form-item label="备注" prop="clientRemark">
        <el-input v-model="client.clientRemark" />
      </el-form-item>
      <el-form-item style="text-align: center;">
        <el-button type="primary" @click="add('formRef')">添加</el-button>
        <el-button @click="restForm('formRef')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import axios from 'axios'
import FilenameOption from './components/FilenameOption'
import AutoWidthOption from './components/AutoWidthOption'
import BookTypeOption from './components/BookTypeOption'
import UploadExcelComponent from '@/components/UploadExcel/index.vue'

export default {
  name: 'ClientList',
  // eslint-disable-next-line vue/no-unused-components
  components: { UploadExcelComponent, FilenameOption, AutoWidthOption, BookTypeOption },
  data() {
    return {
      clientList: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      pages: 0,
      addVisible: false,
      editVisible: false,
      client: {
        clientId: '',
        clientName: '',
        clientLocation: '',
        clientRole: '',
        clientRemark: '',
        clientMAC: '',
        clientIP: ''
      },
      clientRules: {
        clientId: [
          {
            required: true, message: '请输入主机编号', trigger: 'blur'
          }, {
            min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'
          }
        ],
        clientName: [
          {
            required: true, message: '请输入主机名称', trigger: 'blur'
          }, {
            min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'
          }
        ]
      },
      multipleSelection: [],
      ids: [],
      // 非多个禁用
      multiple: true,
      single: true,
      filename: '用户信息',
      autoWidth: true,
      bookType: 'xlsx',
      downloadLoading: false,
      uploadVisible: false
    }
  },
  mounted() {
    this.getClientPage(this.pageNo, this.pageSize)
  },
  activated() {
    this.getClientPage(this.pageNo, this.pageSize)
  },
  methods: {
    add(formName) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.post('http://localhost:8089/client/insertClient', JSON.stringify(that.client), {
            headers: {
              'Content-Type': 'application/json'
            }
          }).then(function(response) {
            if (response.data.code === '2000') {
              that.$message({
                message: '添加成功',
                center: true,
                type: 'success'
              })
              that.getClientPage(that.pageNo, that.pageSize)
              that.addVisible = false
            } else {
              that.$message(response.data.msg)
            }
          })
        } else {
          this.$message('参数不合法')
          return false
        }
      })
    },
    // 重置表单
    restForm(formName) {
      this.$refs[formName].resetFields()
    },
    getClientPage(pn, ps) {
      const that = this
      that.pageNo = pn
      that.pagesize = ps
      axios.get('http://localhost:8089/client/clients', {
        params: {
          pageNo: pn,
          pageSize: ps
        }
      }).then(function(resp) {
        that.clientList = resp.data.data.list
        that.total = resp.data.data.total
        that.pages = resp.data.data.pages
      })
    },
    // 改变每页数据的数量
    handleSizeChange(val) {
      this.pageSize = val
      this.getClientPage(this.pageNo, val)
    },
    // 改变当前页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.pageNo = val
      this.getClientPage(val, this.pageSize)
    }
  }
}
</script>
